<template>
	<view>
		<view class="card u-p-l-20 u-p-t-40 u-p-r-20 u-p-b-40 flex align-start">
			<view class="u-m-l-12">
				<view class="u-m-t-10 u-font-36 text999">
					{{handleOrderStatusFormat(orderInfo.status,orderInfo.orderType)}}
				</view>
			</view>
		</view>

		<view class="card u-p-l-20 u-p-t-24 u-p-r-20 u-p-b-32">
			<view class="u-font-36 text-black text-bold">{{orderInfo.orderInType==1?"用户地址":"用户地址"}}</view>
			<view class="u-m-t-40 flex align-center justify-between">
				<view>
					<view class="u-font-32 text-black">{{orderInfo.lianxiName}}（{{orderInfo.phone}}）</view>
					<view class="u-m-t-16 u-font-24 text999">{{orderInfo.roomAddress}}</view>
				</view>
				<view class="flex align-center" @click="handleCallPhone(orderInfo.phone)">
					<u-icon class="u-m-r-48" name="/static/index/mobile.png" size="54rpx"></u-icon>
				</view>
			</view>
		</view>
		<view class="card u-p-l-20 u-p-r-20 u-p-t-24 u-p-b-24">
			<view v-for="(item,k) in orderInfo.orderDetails" :key="k" class="flex">
				<view class="img-box">
					<u-image :showLoading="true" mode="aspectFill" radius="8rpx" :src="item.image" width="174rpx"
						height="174rpx">
						<view slot="loading">
							<u-loading-icon></u-loading-icon>
						</view>
					</u-image>
				</view>
				<view class="u-m-l-10">
					<view class="ellipsis2 text-black">{{item.productName}}</view>
					<view class="u-m-t-10 u-font-xs text999">{{item.unit}}</view>
					<view class="u-m-t-10 flex align-center justify-between">
						<view style="color: #FD002B;">
							<text class="text-bold  u-font-xs">￥</text>
							<text class="u-font-lgm  text-bold">{{parseFloat(item.salePrice).toFixed(2)}}</text>
							<!-- <text class="u-font-xs  text-bold">.99</text> -->
						</view>
						<view class="u-font-xs text999">x{{item.count}}</view>
					</view>
					<!-- <view class="flex u-col-center u-row-right">
						<view class="btn fill" @click="san(item.id)">扫码入库</view>
					</view> -->
					<!-- <u-button class="u-m-t-10 u-font-xs text999" @click="san(item.id)">扫码入库</u-button> -->
				</view>
			</view>

			<view class="u-m-t-24 flex align-center justify-between  u-p-t-18 solid-top">
				<view style="color: #A8A8A8;">支付总额</view>
				<view class="text-bold" style="color: #696A6C;">
					<text class="u-font-24">￥</text>
					<text>{{parseFloat(orderInfo.amount).toFixed(2)}}</text>
				</view>
			</view>

			<view class="u-m-t-40 flex align-center justify-between" v-if="orderInfo.isVoucher==2">
				<view style="color: #A8A8A8;">优惠券</view>
				<view class="flex align-center">
					<text class="" style="color: #ED4B48;">-￥{{parseFloat(orderInfo.voucherPrice).toFixed(2)}}</text>
				</view>
			</view>
			<view class="u-m-t-40 flex align-center justify-between" v-if="orderInfo.isVoucher==1">
				<view style="color: #A8A8A8;">优惠券</view>
				<view class="flex align-center">
					<text class="" style="color: #ED4B48;">未使用</text>
				</view>
			</view>

			<view class="text-black u-m-t-32 flex align-center justify-end" v-if="orderInfo.payStatus==1">
				<text>实付</text>
				<text class="u-font-24">￥</text>
				<text class="u-font-40 text-bold">{{parseFloat(orderInfo.payAmount).toFixed(2)}}</text>
			</view>
			<view class="text-black u-m-t-32 flex align-center justify-end" v-else>
				<text>应付</text>
				<text class="u-font-24">￥</text>
				<text class="u-font-40 text-bold">{{parseFloat(orderInfo.payAmount).toFixed(2)}}</text>
			</view>
		</view>

		<view class="card u-p-l-20 u-p-r-20 u-p-b-24">
			<view class="flex align-center justify-between u-p-t-24">
				<view style="color: #A8A8A8;">订单类型</view>
				<view style="color: #696A6C;">{{orderInfo.orderInType=='1'?"上门订单":"投递订单"}}</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24">
				<view style="color: #A8A8A8;">订单编号</view>
				<view style="color: #696A6C;">{{orderInfo.id}}</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24">
				<view style="color: #A8A8A8;">下单时间</view>
				<view style="color: #696A6C;">{{orderInfo.createTime}}</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24"
				v-if="orderInfo.orderType=='0'&&orderInfo.orderInType=='1'">
				<view style="color: #A8A8A8;">上门时间</view>
				<view style="color: #ef3900;">
					{{orderInfo.visitBeginTime}}&nbsp;-{{orderInfo.visitEndTime.substring(10,16)}}
				</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24" v-if="orderInfo.deliveryNo">
				<view style="color: #A8A8A8;">取件单号</view>
				<view style="color: #696A6C;">{{orderInfo.deliveryNo}}</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24" v-if="orderInfo.receiveNo">
				<view style="color: #A8A8A8;">送件单号</view>
				<view style="color: #696A6C;">{{orderInfo.receiveNo}}</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24" v-if="orderInfo.payStatus==1">
				<view style="color: #A8A8A8;">付款时间</view>
				<view style="color: #696A6C;">{{orderInfo.payDate}}</view>
			</view>
		</view>

		<view class="card u-p-l-20 u-p-r-20 u-p-b-10" v-if="orderInfo.orderType=='0'&&orderInfo.status!=0">
			<view class="flex align-center justify-between u-p-b-10 u-p-t-20">
				<view style="color: #A8A8A8;">衣服照片</view>
			</view>
			<u-upload :fileList="fileListIndexImg" @afterRead="afterRead" @delete="deletePic()" name="IndexImg" multiple
				:maxCount="30" :previewFullImage="true" width="142rpx" height="142rpx"></u-upload>

		</view>


		<view class="card u-p-l-20 u-p-r-20 u-p-b-24 u-p-t-20" v-if="orderInfo.orderType=='1'">
			<view class="u-p-t-20">
				<u-button text="商家接单" @click="handleJiedan()" color="#FF5B00" type="primary"
					v-if="orderInfo.status==0"></u-button>
			</view>
			<view class="u-p-t-20">
				<u-button text="商品分拣完成" @click="handleFeijian()" color="#FF5B00" type="primary"
					v-if="orderInfo.status==1"></u-button>
			</view>
		</view>
		<view class="card u-p-l-20 u-p-r-20 u-p-b-24 u-p-t-20" v-if="orderInfo.orderType=='0'">
			<view class="u-p-t-20">
				<u-button text="商家接单" @click="handleJiedan()" color="#FF5B00" type="primary"
					v-if="orderInfo.status==0"></u-button>
			</view>
			<view class="u-p-t-20">
				<u-button :text="printtext+'('+connectionstate+')'" color="#FF5B00" type="primary"
					@click="handlePrint(orderInfo.deliveryNo,orderInfo.id)" v-if="orderInfo.status==1"></u-button>
			</view>
			<view class="u-p-t-20">
				<u-button text="转入平台接单" @click="handleOrderTo()" v-if="orderInfo.status==0"></u-button>
			</view>
			<!-- <view class="u-p-t-20" v-if="orderInfo.receiveNo">
				<u-button text="订单完成确认" @click="handleOrderSuccess()"></u-button>
			</view> -->
		</view>



		<view style="height: 210rpx;"></view>
		<u-modal :show="show" :title="title" :content='content' showCancelButton="true" @confirm="handleSanAddPrint()"
			@cancel="handleCloseAdd()"></u-modal>

		<u-modal :show="showImage" title="删除图片" content='确定要删除照片吗？' showCancelButton="true"
			@confirm="handleOkDeleImage()" @cancel="handleCloseImage()"></u-modal>
		<u-modal :show="showJiedan" title="确认接单" content='您确定要接受该订单吗？' showCancelButton="true" cancelText="拒绝接单"
			confirmText="确认接单" @confirm="handleOkJiedan()" @cancel="handleCloseJiedan()"></u-modal>
		<u-modal :show="showOrderPeihuo" title="确认配送" content='您确定配货完成吗？' showCancelButton="true"
			@confirm="handleOkFeijian()" @cancel="handleCancelFeijian()"></u-modal>
	</view>
</template>

<script>
	var plugin = requirePlugin("myPlugin");
	import insured from '@/components/x-unit/insured/insured'

	import {
		getOrderDetailsByIds,
		getDictList,
		payOrder,
		updateOrderDetailsQrCode,
		shareOrderTo,
		getOrderImageList,
		uploadClothsImage,
		deleteOrderImageByIds,
		orderSuccess,
		orderQuJian
	} from "@/common/api/api.js"
	import config from '@/common/config'
	export default {
		components: {
			insured
		},
		data() {
			return {
				value: '1',
				value1: '',
				orderId: '',
				orderInfo: {},
				xihOrderStatus: [],
				mallOrderStatus: [],
				qrcode: '',
				fileListIndexImg: [],
				qingyangOrderId: '',
				connectionstate: '未链接',
				mconnectionstate: false,
				printtext: '打印票据',
				paperstate: '',
				show: false,
				title: '打印机配置',
				content: '打印机没有链接，请确认扫码链接打印机！',
				showImage: false,
				showJiedan: false,
				deleteImageEvent: '',
				showOrderPeihuo: false,
				showShopCancel: false,
			}
		},
		onLoad(options) {
			this.orderId = options.id;
			this.qingyangOrderId = options.qingyangOrderId;
			this.handleGetDictList();
			this.handleGetOrderDetailsByIds();
			this.handleGetOrderImageList();
			if (options.orderType == 0) {
				let appid = uni.getAccountInfoSync().miniProgram.appId;
				plugin.Init(appid); //初始化 需要传递你的appID
				plugin.AutoConnect(); //自动链接设备
			}



		},
		methods: {
			// 是否分拣
			handleFeijian() {
				this.showOrderPeihuo = true;
			},
			handleOkFeijian() {
				this.showOrderPeihuo = false;
				this.handleOrderfenjian(this.orderId, 3);
				this.handleGetOrderDetailsByIds();
			},
			handleCancelFeijian() {
				this.showOrderPeihuo = false;
			},
			// 是否接单
			handleJiedan() {
				this.showJiedan = true;
			},
			// 接单
			handleOkJiedan() {
				this.showJiedan = false;
				orderQuJian({
					id: this.orderInfo.id,
					status: '1'
				}).then(res => {
					if (res.code == 200) {
						uni.$u.toast("商家接单成功！");
						this.handleGetOrderDetailsByIds();
					}
				})
			},
			handleCloseJiedan() {
				this.showJiedan = false;
				this.handleOrderfenjian(this.orderId, -88);
			},
			//打印小票
			handlePrint(no, orderId) {
				if (no) {
					if (this.fileListIndexImg.length >= 3) {
						if (this.mconnectionstate) {
							var data = "! 0 200 200 350 1  \r\n" +
								"CENTER  \r\n" +
								"TEXT 2 0 0 50 优洁客洗衣洗鞋  \r\n" +
								"BARCODE 128 2 2 180 0 100 " + no + "  \r\n" +
								"TEXT 2 0 0 300 " + no + "  \r\n" +
								"FORM  \r\n" +
								"PRINT \r\n";
							plugin.PrintTextToGBK(data);
							orderQuJian({
								id: this.orderInfo.id,
								status: '3'
							}).then(res => {
								if (res.code == 200) {
									uni.$u.toast("揽件成功！");
									this.handleGetOrderDetailsByIds();
								}
							})
						} else {
							this.show = true;
						}
					} else {
						uni.$u.toast("请拍衣服照片不少于3张");
					}
				} else {
					uni.$u.toast("没有取件单号！");
				}

			},
			// 打开扫码添加打印机
			handleSanAddPrint() {
				this.show = false;
				this.refreshData();
				plugin.scanCode();

			},
			handleOrderfenjian(id, status) {
				orderQuJian({
					id: id,
					status: status
				}).then(res => {
					uni.$u.toast("订单操作成功！");
				})
			},
			// 关闭对话框
			handleCloseAdd() {
				this.show = false;
			},
			// 获取订单图片
			handleGetOrderImageList() {
				getOrderImageList({
					qingyangOrderId: this.qingyangOrderId,
					busType: 0
				}).then(res => {
					this.fileListIndexImg = res.data.map(item => {
						return {
							url: item.image,
							id: item.id
						};
					});
				})
			},
			//订单专平台
			handleOrderTo() {
				shareOrderTo({
					orderId: this.orderId
				}).then(res => {
					if (res.code == 200) {
						uni.$u.toast("提交成功！");
						uni.navigateBack({
							delta: 1,
							success: () => {
								uni.$emit('userOrderBack')
							}
						})
					}
				})
			},

			refreshData() //定时刷新
			{
				var that = this;
				setTimeout(function() {
					that.mconnectionstate = plugin.getconnectionstate(); //设备连接状态

					var mpaperstate = plugin.getpaperstate();
					console.log("连接状态=" + that.mconnectionstate)
					if (mpaperstate) {

						that.paperstate = "有纸"

					} else {

						that.paperstate = "无纸"

					}
					if (that.mconnectionstate) {

						that.connectionstate = "已连接"

					} else {

						that.connectionstate = "未连接"

					}
					that.refreshData();
				}, 1000);
			}

			,
			// 订单完成确认
			handleOrderSuccess() {
				orderSuccess({
					id: this.orderId
				}).then(res => {
					if (res.code == '200') {
						uni.$u.toast("提交成功！");
						this.handleGetDictList();
						this.handleGetOrderDetailsByIds();
						this.handleGetOrderImageList();
					}

				})
			},
			san(id) {
				uni.scanCode({
					success: function(res) {
						var params = {
							id: id,
							qrcode: res.result
						}
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			open() {
				this.$refs.insured.show = true;
			},
			handleGetOrderDetailsByIds() {
				getOrderDetailsByIds({
					orderId: this.orderId
				}).then(res => {
					if (res.code == 200) {
						this.orderInfo = res.data;
					}
				})
			},
			handleGetDictList() {
				getDictList({
					type: 'order_status_mall'
				}).then(res => {
					this.mallOrderStatus = res.data;
				})
				getDictList({
					type: 'order_status_xihu'
				}).then(res => {
					this.xihOrderStatus = res.data;
				})
			},
			// 格式化状态
			handleOrderStatusFormat(status, type) {
				console.log(status, type)
				if (0 == type) {
					return this.$utils.selectDictLabel(this.xihOrderStatus, status)
				}
				if (1 == type) {
					return this.$utils.selectDictLabel(this.mallOrderStatus, status)
				}
			},
			// 扫码
			handleUpdateOrderDetailsQrCode(id) {
				var params = {
					id: id,
					qrcode: this.qrcode
				};
				updateOrderDetailsQrCode(params).then(res => {

				})
			},


			// 打电话
			handleCallPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: '' + phone
				})
			},
			// 删除图片
			deletePic(event) {
				console.log(this[`fileList${event.name}`][event.index].id);
				this.deleteImageEvent = event;
				this.showImage = true;
			},
			// 确认删除
			handleOkDeleImage() {
				deleteOrderImageByIds({
					id: this[`fileList${this.deleteImageEvent.name}`][this.deleteImageEvent.index].id
				}).then(res => {
					if (res.code == 200) {
						uni.$u.toast("删除成功！");
					}
					this.showImage = false;
				})
				this[`fileList${this.deleteImageEvent.name}`].splice(this.deleteImageEvent.index, 1)
			},
			// 取消删除
			handleCloseImage() {
				this.showImage = false;
			},
			// 新增主图图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log("result", JSON.parse(result).data);
					uploadClothsImage({
						image: JSON.parse(result).data.url,
						qingyangOrderId: this.qingyangOrderId,
						busType: 0
					}).then(res => {
						if (res.code == 200) {
							uni.$u.toast("上传成功！");
							let item = this[`fileList${event.name}`][fileListLen]
							this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: JSON.parse(result).data.url,
								id: res.data
							}))
							// 提交到

							fileListLen++
						}
					})

				}
				console.log("fileList", this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + "/api/userInfo/userUpload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.card {
		margin-top: 20rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		width: 686rpx;
		min-height: 100rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
	}

	.tag {
		min-width: 184rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 10rpx;
		text-align: center;
		background: #F7F9FC;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		color: #333333;
	}

	.textarea {
		width: 646rpx;
		height: 240rpx;
		background: #F7F9FC;
		border-radius: 8rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		padding: 24rpx 32rpx;

		.btn {
			width: 320rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			background: #FF5B00;
			border-radius: 8rpx;
			color: #FFFFFF;
		}
	}

	.btn {
		width: 160rpx;
		padding: 10rpx 20rpx;
		text-align: center;
		margin-top: 20rpx;
		border-radius: 16rpx;
	}

	.fill {
		color: #FFFFFF;
		background-color: #FF5B00;
	}

	.plain {
		border: 1px solid #FF5B00;
		color: #FF5B00;
	}
</style>